<script setup>

import Carousel from "../components/Carousel.vue";
import Module from "../components/Module.vue";
import Announcement from "../components/Announcement.vue";
import Bottom from "../components/Bottom.vue";
import {UserFilled} from "@element-plus/icons-vue";
import {ElDropdown, ElDropdownItem, ElDropdownMenu} from "element-plus";
import { ref } from 'vue';
import router from "@/router";

const sname = ref(null);
if (sessionStorage.getItem('loginUser')) {
  const user = JSON.parse(sessionStorage.getItem('loginUser'));
  sname.value = user.sname || '未登录';
}

/**
 * 处理下拉菜单命令
 * @param {string} command - 命令名称
 */
const handleCommand = (command) => {
  if (command === 'logout') {
    // 执行登出操作
    logout();
  }
};

const logout = () => {
  router.push('/');
};
</script>

<template>
  <div class="top">
    <h2 style="padding:0 30% 0 40%">欢迎来到智慧校园系统！</h2>
    <div class="user-info">
    <el-dropdown
        v-if="sname"
        trigger="hover"
        @command="handleCommand"
        style="color: black;display: flex"
    >
        <span class="el-dropdown-link">
          <el-avatar
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
           style="height:40px;margin-top: 5px" />
          {{ sname }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    </div>
  </div>
  <div class="middle">
    <carousel></carousel>
  </div>
  <div class="notice">
    <announcement></announcement>
  </div>
  <div>
    <module></module>
  </div>
  <div class="bottom">
    <bottom></bottom>
  </div>
</template>

<style scoped>
.middle{
  width: 100%;
  height: 400px;
}
.notice{
  width: 1200px;
  margin: 40px auto 50px;
  height: 300px;
}
.bottom{
  height: 60px;
  background-color: #cad8f1;
}
.top{
  display: flex;
}

.user-info {
  display: flex;
  align-items: center;
}
</style>